<script setup lang="ts">
import {House, Tools} from "@element-plus/icons-vue";
import {onMounted, ref} from "vue";
import {getLossRecordAPI} from "@/axios/api";

onMounted(() => {
  alertTitle()
  getLossRecord()
})

interface use {
  costPrice: number
  gid: number
  goodName: string
  id: number
  number: number
  remark: string
  sumMoney: number
}

function alertTitle() {
  // GetUserIP()
  // const counterStore = useCounterStore()
  // const userIP = counterStore.userIP
  const now = new Date()
  const year = now.getFullYear() + '年'
  const month = ('0' + (now.getMonth() + 1)).slice(-2) + '月'
  const day = ('0' + now.getDate()).slice(-2) + '日'
  const hours = ('0' + now.getHours()).slice(-2) + '时'
  const minutes = ('0' + now.getMinutes()).slice(-2) + '分'
  const formattedTime = year + month + day + hours + minutes
  return `欢迎使用后台管理系统(V1.2),您本次登录时间为${formattedTime}`
}

function getLossRecord() {
  getLossRecordAPI().then(data => {
    console.log(data)
    getLossRecordData.value = data.data.data.lossList
    console.log("getLossRecordData", getLossRecordData.value)
  })
}

const getLossRecordData = ref([])
const card = [
  {
    title: "商品损耗数",
    list: [
      {
        name: "橙子",
        num: 10
      },
      {
        name: "菜",
        num: 10
      },
      {
        name: "鱼",
        num: 13
      }
    ]
  }
]
</script>
<template>
  <div class="home">
    <div class="title">
      <el-icon>
        <House/>
      </el-icon>
      <el-text>
        首页
      </el-text>
    </div>
    <div
        class="alert"
    >
      <el-alert
          :title="alertTitle()"
          type="success"
          center
          show-icon
      />
    </div>
    <div class="content">
      <el-card>
        <template #header>
          <div class="card-header">
            <el-text>
              损耗数
            </el-text>
            <el-icon>
              <div style="cursor: pointer">
                <Tools/>
              </div>
            </el-icon>
          </div>
        </template>
        <div
            v-for="(item,index) in getLossRecordData"
            :key="index"
            class="el-card-text"
        >
          <span>
            {{ item.goodName }}
          </span>
          <span style="color: #E6A23C">
            {{ item.number }}
          </span>
        </div>
      </el-card>
    </div>
  </div>

</template>
<style scoped>
.home {
  padding: 10px;
}

.title {
  display: flex;
  align-items: center;
  margin-left: 5px;
}

:deep(.title .el-text) {
  color: black;
  margin-left: 5px;
}

.alert {
  height: 40px;
  margin-top: 10px;
}

.content {
  display: flex;
  margin-top: 30px;
}

:deep(.el-card__header) {
  padding: 10px;
  background-color: #eee;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

:deep(.card-header .el-text) {
  color: black;
  font-size: 15px;
  font-weight: bold;
}

:deep(.el-card__body) {
  padding: 10px;
}

.el-card-text {
  width: 80%;
  margin: auto;
  padding: 8px 0;
  display: flex;
  justify-content: space-between;
}

:deep(.content .el-card) {
  width: 25%;
  margin-left: 1%;
  margin-right: 2%;
}
</style>